import StatusConteiner from "@/components/StatusConteiner";
import { View, ViewProps } from "@tarojs/components";
import ImageCard from "@/components/ImageCard";
import Taro from "@tarojs/taro";
import { TPlanMotion } from "@/types";

type Props = {
  motion: TPlanMotion;
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
} & ViewProps;

const MotionCard = ({
  motion,
  children,
  className,
  onClick,
  ...others
}: Props) => {
  return (
    <StatusConteiner
      type="white"
      className={`start-plan-item ${className}`}
      {...others}
    >
      <View style={{ width: Taro.pxTransform(120) }}>
        <ImageCard
          img={motion.img || ""}
          title={motion.name}
          size={Taro.pxTransform(120)}
          showTitle={false}
          detailAction={motion.motionId}
        />
      </View>
      <View className="start-plan-item-right">
        {children}
      </View>
    </StatusConteiner>
  );
};

export default MotionCard;
